<template>
	<view class="container">


		<view class="orderArea">
			<!-- 显示状态部分 -->
			<view class="statusContent">
				<view class="textContent">
					{{orderStatusTextMap[orderInfo.ordersPayStatus]}}
				</view>
			</view>

			<view class="detailContent">


				<!-- 这里用子商品列表来渲染 -->
				<view class="goodDetail">

					<view class="goodsItem" v-for="(item,index) in orderInfo.ordersDetailList">
						<!-- 商品图片 -->
						<view class="imgContent">
							<image :src="item.ordersDetailProductDetailImg" mode="scaleToFill"></image>
						</view>
						<!-- 商品描述 -->
						<view class="descContent">
							<view class="mainDesc">
								<view class="mainGoodTitle">
									{{item.productName}}
								</view>
								<view class="priceAndNum">
									<view class="price">
										￥{{ Number(item.ordersDetailProductDetailPrice).toFixed(2) }}
									</view>
									<view class="quantity">
										×{{item.ordersDetailNumber}}
									</view>
								</view>
							</view>
							<view class="additionDesc">
								{{item.ordersDetailProductDetailSpecifications}}
							</view>
						</view>
					</view>



					<view class="priceContent">
						<view class="totalPrice">
							<text>商品总价</text>
							<text class="total">￥{{Number(orderInfo.ordersThingAmount).toFixed(2) }}</text>
						</view>

						<view class="deliverFee">
							<text>运费</text>
							<text class="deliver">
								￥{{Number(orderInfo.ordersTransportAmount).toFixed(2) }}
							</text>
						</view>

						<view class="realPrice">
							<text v-if="orderInfo.ordersPayStatus===0">应付款</text>
							<text v-else>实付款</text>

							<text
								class="real">￥{{Number(orderInfo.ordersThingAmount+orderInfo.ordersTransportAmount).toFixed(2) }}</text>
						</view>

					</view>

				</view>


				<view class="addressDetail">
					<view class="personInfo">
						<text>收货信息</text>
						<text class="info">{{personInfo}}</text>
					</view>

					<view class="addressInfo">
						<text style="margin-bottom: 48rpx;">收货地址</text>
						<text class="address">{{address}}</text>
					</view>

				</view>

				<!-- 快递单号根据订单状态 -->
				<view class="trackNumberDetail" v-if="Number(orderInfo.ordersPayStatus)===2||Number(orderInfo.ordersPayStatus)===3">
					<view class="trackContent">
						<text>快递单号</text>

						<view class="numArea">
							<view class="numItem" v-for="num in  orderInfo.ordersTransportNumber">
								<text class="numBox">{{num}}</text>
								<text class="copy" @tap="copyText(num)">复制</text>
							</view>
						</view>

					</view>
				</view>



				<view class="referenceDetail">

					<view class="orderNum">
						<text class="num">订单编号:</text>
						<text>{{orderInfo.id}}</text>
					</view>

					<view class="orderTime">
						<text>创建时间:</text>
						<text class="time">{{orderInfo.ordersTime}}</text>
					</view>

					<!-- //根据订单状态动态显示 -->
					<view class="orderTime" v-if="orderInfo.ordersPayStatus!=0&&orderInfo.ordersPayStatus!=4">
						<text>付款时间:</text>
						<text class="time">{{orderInfo.ordersCheckoutTime}}</text>
					</view>

					<view class="orderTime" v-if="orderInfo.ordersPayStatus===4">
						<text>取消时间:</text>
						<text class="time">{{orderInfo.ordersCancelTime}}</text>
					</view>

					<view class="orderTime" v-if="orderInfo.ordersPayStatus===3">
						<text>完成时间:</text>
						<text class="time">{{orderInfo.ordersFinishTime}}</text>
					</view>


					<!-- 这里判定有没有传入备注信息 -->
					<view class="remarkInfo" v-if="orderInfo.ordersRemark!=''">
						<text style="margin-bottom: 100rpx;">备注:</text>
						<text class="remark">{{orderInfo.ordersRemark}}</text>
					</view>
				</view>
			</view>

		</view>



		<!-- 底部按钮栏 根据状态不同进行显示-->
		<view class="btnFoot">
			<view class="operateButtons">
				<view class="buttonPosition">
					<button type="default" v-if="orderInfo.ordersPayStatus===0" class="detail"
						@click="openConfirmCard(orderInfo.id,'确定要取消该订单吗',1)">取消订单</button>
					<button type="default" v-if="orderInfo.ordersPayStatus===0" class="confirm"
						@click="toPay(orderInfo.id)">去付款</button>
					<button type="default" v-if="orderInfo.ordersPayStatus===2" class="confirm"
						@click="openConfirmCard(orderInfo.id,'您确认要签收该订单吗',3)">去收货</button>
					<button type="default" v-if="orderInfo.ordersPayStatus===4" class="detail"
						@click="openConfirmCard(orderInfo.id,'确认要删除该订单吗',2)">删除订单</button>


				</view>
			</view>
		</view>

		<!-- 自己封装的弹出框 -->
		<confirmPop :isPopUp="confirmStatus" :title="operateTitle" @cancel="closeConfirmCard()"
			@confirm="handleConfirm()">
		</confirmPop>

		<view @click="closeConfirmCard()">
			<popMask :isShow="confirmStatus"></popMask>
		</view>
	</view>
</template>

<script>
	import * as OrderApi from '@/api/orders/orders.js'
	import * as addressApi from '@/api/address/address.js'
	import * as payApi from '@/api/pay/pay.js'
	import confirmPop from '@/components/confirmPop.vue'
	import popMask from '@/components/popMask.vue'
	let lastRequestTime = 0;
	const requestInterval = 1000; // 设置请求的最小间隔时间，例如1000毫秒
	export default {
		components: {
			confirmPop,
			popMask
		},
		data() {
			return {
				copytext: 'fdfdff',
				orderId: '',
				orderInfo: null,
				addressInfo: null,
				addressId: null,
				address: '',
				personInfo: '',
				realPrice: '',
				orderStatusTextMap: {
					0: '待买家付款',
					1: '待平台发货',
					2: '待买家收货',
					3: '交易已完成',
					4: '交易已取消',
					5: '退款'
				},
				//取消订单的确认位
				confirmStatus: false,
				//准备取消的订单Id
				operateId: null,
				operateTitle: null,
				operateFlag: null



			};
		},

		computed: {

		},

		async onLoad(options) {
			const paramsStr = options.params; // 获取URL查询参数中的params字段
			//接收订单页面传来的子商品id和商品数量
			const receivedParams = JSON.parse(paramsStr); // 将参数字符串解析为对象  
			if (receivedParams.order != null) {
				this.orderInfo = receivedParams.order[0];
			}

			await this.getAddressInfo();

		},

		methods: {
			//接收订单列表传来的id进行订单详情的查询
			async getOrderDetail() {

				this.realPrice = this.orderInfo.ordersThingAmount + this.orderInfo.ordersTransportAmount;


			},
			async getAddressInfo() {


				this.address = this.orderInfo.addressConsigneeProvinceName +
					this.orderInfo.addressConsigneeCityName +
					this.orderInfo.addressConsigneeDistrictName +
					this.orderInfo.addressConsigneeDetail;

				this.personInfo = this.orderInfo.addressConsigneeName + this.orderInfo.addressConsigneePhone;

			},
			// 复制快递单号方法
			copyText(text) {
				uni.$copyText(text)
			},

			// 携带id跳转到付款页面
			async toPay(id) {
				const currentTime = new Date().getTime();
				if (currentTime - lastRequestTime < requestInterval) {
					return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
				}
				lastRequestTime = currentTime; // 更新上一次请求时间
				const res = await payApi.payOrderMoney(id);
				console.log("去支付的数据")
				console.log(res);
				if (res.data.code === 200) {
					let orderResponseData = res.data.data.stringStringMap;
					uni.$WxPay(orderResponseData);
				}

			},

			openConfirmCard(id, title, flag) {
				this.operateId = id;
				this.operateTitle = title;
				this.operateFlag = flag;
				this.confirmStatus = true;
			},

			closeConfirmCard() {
				this.confirmStatus = false;
			},
			handleConfirm() {
				let flag = this.operateFlag;
				if (flag === 1) {
					this.toCancel();
				} else if (flag === 2) {
					this.toDelete();
				} else if (flag === 3) {
					this.toReceiveGoods();
				}
			},

			//取消订单
			async toCancel() {
				this.confirmStatus = false;
				const res = await OrderApi.cancelOrder(this.operateId);
				console.log("取消订单")
				console.log(res)
				if (res.data.code == 200) {

					this.operateId = null;
					uni.$goBack();
					return uni.$showMsg('取消订单成功')

				}
			},

			//删除已取消的订单
			async toDelete() {
				this.confirmStatus = false;
				const res = await OrderApi.deleteOrdersList(this.operateId);
				console.log("删除订单")
				console.log(res)
				if (res.data.code == 200) {

					this.operateId = null;
					uni.$goBack();
					return uni.$showMsg('删除订单成功')

				}
			},

			async toReceiveGoods() {
				const currentTime = new Date().getTime();
				if (currentTime - lastRequestTime < requestInterval) {
					return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
				}
				lastRequestTime = currentTime; // 更新上一次请求时间
				this.confirmStatus = false;
				const res = await OrderApi.toReceive(this.operateId);
				console.log("订单收货")
				console.log(res)
				if (res.data.code == 200) {
					this.operateId = null;
					uni.$goBack();
					return uni.$showMsg('已收货')

				}
			},







		}
	}
</script>



<style lang="scss" scoped>
	.container {
		display: flex;
		align-items: center;
		flex-direction: column;
		
		width: 100vw;

		background: rgba(243, 243, 245, 1);



		.orderArea {
			box-sizing: border-box;
			width: 100vw;
			margin: 0;
			padding-bottom: 30rpx;
			height: calc(100vh - 160rpx);
			
			overflow: auto;
			
			.statusContent {
				width: 100%;
				height: 124rpx;
				display: flex;
				align-items: center;
				background: rgba(243, 243, 245, 1);

				.textContent {
					margin-left: 48rpx;
					color: rgba(179, 130, 75, 1);
					font-size: 40rpx;
					font-weight: 700;
				}

			}

			.detailContent {
				background: rgba(243, 243, 245, 1);
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100%;
				padding-left: 28rpx;
				padding-right: 28rpx;
				margin-top: 30rpx;


				.goodDetail {
					border-radius: 10rpx;
					background: rgba(255, 255, 255, 1);
					width: 100%;

					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;

					.goodsItem {
						box-sizing: border-box;
						padding: 15rpx;
						padding-bottom: 5rpx;
						width: 100%;
						display: flex;
						align-items: center;
						display: flex;


						.imgContent {
							width: 158rpx;
							height: 152rpx;
							border-radius: 8rpx;

							image {
								width: 158rpx;
								height: 152rpx;
								border-radius: 8rpx;
							}

						}

						.descContent {
							margin-left: 20rpx;

							.mainDesc {
								width: 100%;
								display: flex;

								.mainGoodTitle {
									font-size: 32rpx;
									width: 320rpx;
								}

								.priceAndNum {
									// margin-right: 12rpx;
									margin-left: 36rpx;
									display: flex;
									flex-direction: column;
									text-align: right;

									.price {
										font-size: 32rpx;
										color: rgba(0, 0, 0, 1);
									}

									.quantity {
										color: rgba(128, 128, 128, 1);
										font-size: 24rpx
									}

								}


							}

							.additionDesc {
								margin-top: 15rpx;
								color: rgba(128, 128, 128, 1);
								font-size: 24rpx;
							}
						}
					}

					.priceContent {
						margin-top: 20rpx;
						width: 100%;
						display: flex;
						margin-bottom: 32rpx;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						text {
							font-size: 28rpx;
							color: rgba(105, 105, 105, 1);
						}

						.totalPrice {
							width: calc(100% - 40rpx);
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							font-size: 24rpx;
							color: rgba(0, 0, 0, 1);
							box-sizing: border-box;
							margin-bottom: 20rpx;

							.total {}
						}

						.deliverFee {
							width: calc(100% - 40rpx);
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							box-sizing: border-box;
							margin-bottom: 20rpx;

							.deliver {
								font-weight: 500;
								color: rgba(0, 0, 0, 1);
								font-size: 24rpx;
							}
						}

						.realPrice {
							box-sizing: border-box;
							margin-top: 0rpx;
							width: calc(100% - 40rpx);
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							color: rgba(212, 48, 48, 1);
							font-size: 20rpx;
							font-weight: 500;

							.real {
								color: rgba(212, 48, 48, 1);
								font-size: 32rpx;
								font-weight: 500;
							}
						}
					}



				}

				.addressDetail {
					border-radius: 10rpx;
					background: rgba(255, 255, 255, 1);
					box-sizing: border-box;
					width: 100%;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.personInfo {
						box-sizing: border-box;
						width: calc(100% - 40rpx);
						display: flex;
						margin-top: 20rpx;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						.info {
							color: rgba(0, 0, 0, 1);
							font-size: 28rpx;
						}

						text {
							font-size: 28rpx;
							color: rgba(105, 105, 105, 1);
						}
					}

					.addressInfo {
						box-sizing: border-box;
						width: calc(100% - 40rpx);
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						margin-top: 10rpx;

						text {
							font-size: 28rpx;
							color: rgba(105, 105, 105, 1);
						}

						.address {
							padding-left: 0rpx;
							box-sizing: border-box;
							text-align: right;
							font-size: 24rpx;
							width: 390rpx;
							color: rgba(0, 0, 0, 1);
							font-size: 24rpx;
						}
					}

				}

				// 快递单号板块
				.trackNumberDetail {
					padding-top: 10rpx;
					padding-bottom: 10rpx;
					border-radius: 10rpx;
					background: rgba(255, 255, 255, 1);
					box-sizing: border-box;
					width: 100%;
					margin-bottom: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					position: relative;

					.trackContent {
						.title {}

						height: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: calc(100% - 40rpx);
						color: rgba(85, 85, 87, 1);
						font-size: 28rpx;


						.numArea {


							.numItem {

								.numBox {
									position: absolute;
									right: 102rpx;
								}

								.copy {
									color: rgba(223, 161, 60, 1);
								}
							}
						}



					}
				}

				.referenceDetail {
					border-radius: 10rpx;
					background: rgba(255, 255, 255, 1);
					width: 100%;
					margin-bottom: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;


					.orderNum {
						width: calc(100% - 40rpx);
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;
						margin-top: 20rpx;

						.num {
							color: rgba(85, 85, 87, 1);
							font-size: 28rpx;
						}

						text {
							font-size: 28rpx;
							color: rgba(105, 105, 105, 1);
						}
					}

					.orderTime {
						width: calc(100% - 40rpx);
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;

						.time {
							font-size: 28rpx;
							color: rgba(85, 85, 87, 1);
						}

						text {
							font-size: 28rpx;
							color: rgba(105, 105, 105, 1);
						}
					}

					.remarkInfo {
						width: calc(100% - 40rpx);
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						text {
							font-size: 28rpx;
							color: rgba(105, 105, 105, 1);
						}

						.remark {

							margin-top: -15rpx;
							width: 570rpx;
							height: 122rpx;
							color: rgba(85, 85, 87, 1);
						}
					}
				}


			}

		}

		// 按钮组

		.btnFoot {
			position: fixed;
			bottom: 0;
			width: 100vw;
			height: 160rpx;
			padding-right: 48rpx;
			background: rgba(255, 255, 255, 1);

			.operateButtons {


				padding-right: 0;
				margin-top: 20rpx;
				position: relative;
				height: 54rpx;

				.buttonPosition {

					position: absolute;
					right: 0rpx;
					display: flex;
				}


				button {
					margin-left: 30rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					font-weight: 400;
					height: 54rpx;
					opacity: 1;
					border-radius: 26rpx;
					display: flex;
					width: 160rpx;
					align-items: center;
					justify-content: center;
					line-height: 36rpx;
				}

				.confirm {

					color: rgba(255, 255, 255, 1);
					background: rgba(196, 143, 82, 1);
					border: 1rpx rgba(196, 143, 82, 1);
				}

				.detail {
					color: rgba(0, 0, 0, 1);
					border: 1rpx solid rgba(85, 85, 87, 1);

				}
			}

		}

	}
</style>